@import '~styles/settings.scss';

.c-data-analysis-menu {
  display: flex;
  flex-flow: column;
  max-height: calc(100vh - 70px);
  width: rem(290px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
  background: $white;
  transition: transform 0.3s linear;
  position: relative;
  z-index: 1;

  &.relocate {
    transform: translateX(305px);
  }

  &.big {
    transform: translateX(562px);
  }

  .nav {
    border-bottom: solid 1px $border;
    position: relative;
    z-index: 2;
    height: auto;
  }

  .map-legend,
  .map-analysis {
    position: relative;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex: 1;
    max-height: calc(100vh - 70px);
    z-index: 1;

    @media screen and (min-width: $screen-m) and (max-width: 1090px) {
      max-height: calc(100vh - 110px);
    }
  }

  &.embed {
    .map-legend,
    .map-analysis {
      max-height: calc(100vh - 200px);
    }
  }
}
